<template>
    <el-form ref="form" label-position="right" class="j-attribute-set" size="mini" label-width="80px">
        <el-form-item label="数据集">
            <el-select v-model="name" placeholder="请选择数据集" @change="targetChange">
                <el-option :label="i.title" :value="i.name" :key="k" v-for="(i,k) in gather.target"></el-option>
            </el-select>
            <el-select v-model="field" placeholder="请选择字段"" @change=" fieldChange">
                <el-option :label=" item.title" :value="item.field" :key="index" v-for="(item,index) in fields">
                </el-option>
            </el-select>
            <!-- <el-radio v-model="value.bind[0].field" :label="item.field" :key="index" v-for="(item,index) in fields">{{item.title}}</el-radio> -->
        </el-form-item>
    </el-form>
</template>
<script type="text/javascript">
import { createNamespacedHelpers } from 'vuex';
const { mapGetters } = createNamespacedHelpers('cloud')
export default {
    props: {
        value: [Array, Object, Number, String]
    },
    data() {
        return {
            fields: [],
            name: '',
            field: ''
        }
    },
    computed: {
        ...mapGetters(['gather'])
    },
    beforeMount() {
        let str = JSON.parse(JSON.stringify(this.value.bind.value));
        let arr = str.split('.');
        if (arr.length >= 2) {
            this.name = arr[0];
            this.field = arr[1];
        }
        for (var i = 0; i < this.gather.target.length; i++) {
            if (this.gather.target[i].name == this.name) {
                this.fields = this.gather.target[i].fields
            }
        }
    },
    methods: {
        targetChange(val) {
            this.name = val;
            this.field = '';
            for (var i = 0; i < this.gather.target.length; i++) {
                if (this.gather.target[i].name == val) {
                    this.fields = this.gather.target[i].fields
                }
            }
        },
        fieldChange(val) {
            this.field = val;
            this.value.bind.value = this.name+'.'+this.field;
            console.log(222,this.value)
        }
    }

}
</script>
<style type="text/css" lang="scss">
.j-attribute-set {
    padding: 10px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
}
</style>